<template>
  <div>
    <el-form>
      <div class="search-panel">
        <el-row>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="项目名称" label-width="80px">
                <el-select
                  v-model="ProjectName"
                  size="mini"
                  placeholder="请选择"
                  @change="ProChange"
                  style="width: 90%"
                >
                  <el-option-group
                    v-for="group in optionProJect"
                    :key="group.lable"
                    :label="group.lable"
                  >
                    <el-option
                      v-for="item in group.options"
                      :key="item.value"
                      :label="item.lable"
                      :value="item.value"
                    />
                  </el-option-group>
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="6"
            ><div class="grid-content bg-purple-dark">
              <el-form-item label="项目版本">
                <el-select
                  v-model="ProVersion"
                  size="mini"
                  placeholder="请选择"
                  @change="VersionChange"
                  value-key="版本号"
                  style="width: 70%"
                >
                  <el-option
                    v-for="item in optionVersion"
                    :key="item.版本号"
                    :label="item.版本号"
                    :value="item"
                  />
                </el-select>
              </el-form-item></div
          ></el-col>
          <el-col :span="2">
            <div
              style="
                width: 110px;
                height: 30px;
                line-height: 36px;
                font-weight: bold;
              "
            >
              <span
                v-show="ProState != '' && ProState != undefined"
                :style="{ 'font-size': '14px', color: funColor(ProState) }"
                >{{ funState(ProState) }}</span
              >
            </div>
          </el-col>
        </el-row>
      </div>
    </el-form>
          <el-table
            :data="Datalist"
            style="width: 100%; margin-bottom: 20px"
            row-key="objectID"
            border
            :row-style="{ height: '20px' }"
            :cell-style="{ padding: '0px' }"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            @cell-mouse-enter="enter"
            @cell-mouse-leave="leave"
            v-loading="loading"
            default-expand-all
          >
            <el-table-column prop="任务编码" fixed label="任务编码" width="200" />
            <el-table-column label="作业名称" prop="任务名称" show-overflow-tooltip fixed width="210">
            </el-table-column>
            <el-table-column prop="设计量" label="设计量" width="80" />
            <el-table-column label="进度" width="200">
              <template scope="scope">
                <el-progress
                  :percentage="scope.row.jind"
                  :color="customColorMethod"
                />
              </template>
            </el-table-column>
            <el-table-column label="状态" width="140">
              <template scope="scope">
                <div v-if="scope.row.zhuangt == 1" style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,此为关键路径任务，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预警.png"
                    />
                  </el-tooltip>
                  <el-tag>正常</el-tag>
                </div>
                <div v-else style="text-align: center">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="
                      '任务“' +
                      scope.row.任务名称 +
                      '”计划于' +
                      scope.row.完成时间 +
                      '完成,现已超期，予以重视'
                    "
                    placement="top-start"
                  >
                    <img
                      style="cursor: pointer; margin: 0px 15px -6px 0px"
                      src="../../assets/image/预期.png"
                    />
                  </el-tooltip>
                  <el-tag type="danger">滞后</el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="开始时间" label="计划开始时间" width="140" />
            <el-table-column prop="完成时间" label="计划完成时间" width="140" />
            <el-table-column
              prop="累计完成总量"
              label="累计完成总量"
              width="100"
            />
            <el-table-column prop="年度完成量" label="年度完成量" width="100" />
            <el-table-column prop="月度完成量" label="月度完成量" min-width="100" />
          </el-table>

  </div>
</template>
<script>
import axios from "axios";
import {getApi} from "@/utils/utils.js"
export default {
  data() {
    return {
      UserID:this.$getUserInfo().ObjectID,
      // DeptName:this.$getUserInfo().ParentName,
      //UserID: "18f923a7-5a5e-426d-94ae-a55ad1a4b239",
      DeptName: "",
      activeName: "first",
      // 表数据
      Datalist: [],
      ProjectName: "",
      ProVersion: [],
      optionProJect: [],
      optionVersion: [],
      loading: false,
      parentNodeCode: "",
      versionCode: "",
      ProState: "",
      apiUrl:''
    };
  },
  computed: {},
  created() {
    
    //this.getUserRoot()
    getApi(this).then((res) => {
            console.log(res)
            this.apiUrl=res.ApiUrl
            this.GetProName();
    });
  },
  mounted() {},
  methods: {
    customColorMethod(percentage) {
      if (percentage < 50) {
        return "#409eff";
      } else {
        return "#67c23a";
      }
    },
    funState(val) {
      switch (val) {
        case "0":
          return "已上传";
        case "1":
          return "待审批";
        case "2":
          return "已批准";
        case "3":
          return "已驳回";
        default:
          return "";
      }
    },
    funColor(val) {
      switch (val) {
        case "0":
          return "#0078d7";
        case "1":
          return "#ffaa00";
        case "2":
          return "#67c23a";
        case "3":
          return "#ff0000";
        default:
          return "";
      }
    },
    getUserRoot() {
      const _that = this;
      axios({
        method: "get",
        url: `${this.apiUrl}/Pmsapi/PlanManagement/GetRoleByLoginUserId?loginUserId=${_that.UserID}`,
      }).then((res) => {
        console.log(res.data.data.role)
        if (res.data.data.role == 1) {
          _that.DeptName = "生产管理部";
        } else if (res.data.data.role == 2) {
          _that.DeptName = "项目部";
        }
      });
    },
    // 绑定项目名称下拉框
    GetProName() {
      const _that = this;
      axios({
        method: "get",
        url: `${this.apiUrl}/Pmsapi/PlanManagement/GetProjectInfoByLoginUserId?loginUserId=${_that.UserID}`,
      }).then((res) => {
        _that.optionProJect.push({
          options: [{ value: "0", lable: "请选择" }],
        });
        if (res.data.data.errMsg == "") {
          res.data.data.data.forEach((element) => {
            _that.optionProJect.push(element);
          });
        }
        this.ProjectName = "0";
      });
    },

    // 绑定项目版本
    GetProversion(xid, val) {
      const _that = this;
      _that.optionVersion = [];
      axios({
        method: "get",
        url: `${this.apiUrl}/Pmsapi/PlanManagement/GetProjectPlanEditions?projectId=${xid}`,
      }).then((res) => {
        _that.optionVersion.push({ 版本号: "请选择" });
        if (res.data.data.errMsg == "") {
          res.data.data.data.forEach((element) => {
            _that.optionVersion.push(element);
          });
        }
        if (val != null && val != undefined)
          _that.ProVersion = _that.optionVersion.find((item) => {
            return item.版本号 == val;
          });
        _that.ProState = _that.ProVersion.状态;
        console.log(_that.ProState);
      });
    },
    // 项目名称改变事件
    ProChange(val) {
      this.Datalist = [];
      this.GetProversion(val, "请选择");
    },
    // 项目版本改变事件
    VersionChange(val) {
      console.log(val);
      this.ProState = val.状态;
      this.$nextTick(() => this.GetList());
    },
    // 获取项目
    GetList() {
      const _that = this;
      _that.loading = true;
      _that.Datalist = [];
        axios({
          method: "get",
          url: `${this.apiUrl}/Pmsapi/PlanManagement/GetKeyNodesOfProject?projectId=${_that.ProjectName}&projectPlanEditionCode=${_that.ProVersion.版本号}`,
        }).then((res) => {
          if (res.data.data.errMsg == "") {
            _that.Datalist = res.data.data.data;
          }
          this.loading = false;
        });
    },
    enter(row, column, cell) {
      // console.log(row);
      // console.log(column);
      // console.log(cell);
    },
    leave(row, column, cell) {},
  },
};
</script>

<style scoped>
/deep/ * {
  font-size: 12px;
}
.search-panel {
  padding: 20px 5px 0px 0px;
  box-sizing: border-box;
}
.manage-panel {
  box-sizing: border-box;
  padding: 4px 10px 0px;
  border-top: solid 1px #e8eaef;
}
.data-panel {
  box-sizing: border-box;
  padding: 5px;
}

/deep/.el-collapse-item__header {
  background-color: #f4f6f9;
  height: 28px;
  color: #000000;
  font-weight: bold;
}
.pagination-panel {
  text-align: right;
  padding: 5px;
  box-sizing: border-box;
}

/deep/ .el-dialog__title {
  font-size: 16px;
}

/deep/ .el-dialog__footer {
  padding-top: 20px;
}
</style>

<style>
.addForm .el-form-item__content {
  margin-left: 25px !important;
}
</style>
